<template>
    <div>
    <div id="pdfDom">
      <el-card>
        <div class="head">
          <div>
            <img
              style="width: 150px"
              src="@/assets/svg/p_logo_color.png"
              mode="scaleToFill"
            />
          </div>
          <div class="linespace1">
            <div class="line"></div>
          </div>
          <div class="titel">必达智慧物联报告</div>
          <div class="number">防伪编号{{ filelist.number }}</div>
        </div>
  
        <div class="middle">
          <div class="filename">文件名称：{{ filelist.fileName }}</div>
          <div>签署状态:{{ filelist.mode }}</div>
          <div>被驳回日期：{{ deadline }}</div>
        </div>
        <div class="linespace">
          <div class="line1"></div>
        </div>
        <div>
          <div class="filename1">文件</div>
          <div
            v-for="(item, index) in documentlist"
            :key="index"
          >
            <el-button size="small" type="text" @click="down(item.url)">
              <a class="filewatch1">{{ item.name }}</a>
            </el-button>
          </div>
        </div>
        <div class="linespace">
          <div class="line1"></div>
        </div>
        <div>
          <div class="filename1">附件</div>
          <div v-if="enclosurelist==''" class="filewatch1">无</div>
          <div
            v-for="(item, index) in enclosurelist"
            :key="index"
          >
            <el-button size="small" type="text" @click="down(item.url)">
              <a class="filewatch1">{{ item.name }}</a>
            </el-button>
          </div>
          <div class="linespace">
          <div class="line1"></div>
        </div>
        </div>
        <div>
          <div class="filename1">备注</div>
          <div class="introduction" v-if="filelistInf.introduction==''">无</div>
          <div v-else class="introduction">{{ filelistInf.introduction }}</div> 
        </div>
  
        <div class="linespace">
          <div class="line1"></div>
        </div>
  
        <div>
          <div class="filename1">签署信息</div>
          <div v-for="(item,index) in signDetail" :key="index" class="filewatch1">
          {{ item }}
          </div>
        </div>
  
        <div class="linespace">
          <div class="line1"></div>
        </div>
  
        <div>
          <div class="filename1">印章信息</div>
            <div v-if="flow == ''" class="introduction">无</div>
            <div v-else class="introduction">{{ flow }}</div>
        </div>
  
        <div class="linespace">
          <div class="line1"></div>
        </div>
        
        <div>
            <div class="filename1">驳回信息</div>
            <div class="filewatch1">{{ recall }}</div>
        </div>

        <div class="linespace">
          <div class="line1"></div>
        </div>

        <div>
          <div class="filename1">文件读取记录</div>
          <div v-for="(item, index) in watchlist" :key="index" class="filewatch">
            <div>{{ index + 1 }}</div>
            <div>观看人:{{ item.watchName }}</div>
            <div>观看时间：{{ dateFormat(item.beginDate) }}</div>
            <div>持续时间：{{ item.duration }} 分钟</div>
          </div>
        </div>
      </el-card>
      </div>
      <button v-on:click="getPdf()">导出</button>
    </div>
    
  </template>
  
  <script>
  import { getFileByid, getflowList, getnowflow, getwatchList,getrecall} from "@/http/api";
  
  export default {
    data() {
      return {
        filelist: [],
        flow: [], //印章
        watchlist: [], //文件读取记录
        filelistInf: [],
        signDetail: [],
        documentlist: [], //文件信息
        enclosurelist: [], //附件信息
        recall:'',
        deadline:''
      };
    },
    created() {
      this.getinf();
      this.getfile();
      this.getrecallInf();
      this.getwatch();
      this.getflow();
    },
    methods: {
      
      getinf() {
        (this.filelist = this.$route.query.id), console.log(this.filelist);
      },
      dateFormat: function (dateString) {
        var date = new Date(dateString);
        var year = date.getFullYear();
        var month =
          date.getMonth() < 9
            ? "0" + (date.getMonth() + 1)
            : "" + (date.getMonth() + 1);
        var day =
          date.getDate() < 10 ? "0" + date.getDate() : "" + date.getDate();
        var hour =
          date.getHours() < 10 ? "0" + date.getHours() : "" + date.getHours();
        var minutes =
          date.getMinutes() < 10
            ? "0" + date.getMinutes()
            : "" + date.getMinutes();
        // var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : "" + date.getSeconds();
        return year + "-" + month + "-" + day + " " + hour + ":" + minutes;
      },
      //获取驳回信息
      getrecallInf(){
        var data={
            fileId:this.filelist.id,
        };

        getrecall(data).then((res)=>{
            console.log(res)
            this.recall = res.data.adminName + ' 于 ' + this.dateFormat(res.data.recallDate) + ' 驳回审批，驳回原因为：' + res.data.content
			this.deadline = this.dateFormat(res.data.recallDate)
        })
      },
      //获取文件信息
      getfile() {
        const data = {
          id: this.filelist.id,
        };
        getFileByid(data).then((res) => {
          // console.log(res);
          this.enclosurelist = res.data.enclosurelist;
          this.documentlist = res.data.documentlist;
          this.filelistInf = res.data.file;
          if (res.data.file.mode == "个人发起") {
            this.signDetail.push(
              res.data.file.applicantName +
              " 于 " +
              this.dateFormat(res.data.file.applicationDate) +
              " 发起签署")
          } else {
            this.signDetail.push(
              res.data.file.companyName +
              " 于 " +
              this.dateFormat(res.data.file.applicationDate) +
              " 发起签署")
          }
          console.log(this.signDetail)
          this.getflowinf();
          
        });
      },
      down(val){
        console.log(val)
        let link = document.createElement('a');
          link.style.display = 'none';
          link.href = this.$down_url + '/file' + val.split('/home/iaais')[1];
          console.log(link.href)
          document.body.appendChild(link);link.click();document.body.removeChild(link);
      },
      //获取签署信息
      getflowinf() {
        const data = {
          fileId: this.filelist.id,
        };
        getflowList(data).then((res) => {
          for (var i in res.data.recordlist) {
            this.signDetail.push(
              res.data.recordlist[i].passerName +
              " 于 " +
              this.dateFormat(res.data.recordlist[i].passerDate) +
              " 签署")
          }
          console.log(this.signDetail)
        });
      },
      //获取阅读记录
      getwatch() {
        const data = {
          id: this.filelist.id,
        };
        getwatchList(data).then((res) => {
          this.watchlist = res.data;
        });
      },
      //获取印章需求
      getflow() {
        const data = {
          mouldId: this.filelist.mouldId,
          grade: this.filelist.status,
        };
        getnowflow(data).then((res) => {
          this.flow = res.data.seal;
        });
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
  .filename {
    font-size: 18px;
    font-weight: bold;
  }
  .head {
    position: relative;
    text-align: center;
    align-items: center;
  }
  .logo {
    width: 70px;
    height: 7vh;
  }
  .line {
    width: 80vw;
    height: 2px;
    background: #006360;
    position: relative;
    text-align: center;
  }
  .titel {
    margin-top: 15px;
    font-size: 30px;
    font-weight: bold;
  }
  .number {
    margin-top: 5px;
    font-size: 18px;
  }
  .middle {
    margin-left: 5rem;
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 80px;
  }
  .linespace1 {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
  }
  .linespace {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
  }
  .line1 {
    width: 60rem;
    height: 1px;
    background-color: black;
  }
  .filename1 {
    margin-top: 30px;
    margin-left: 6rem;
    font-size: 18px;
    font-weight: bold;
    color: #18716f;
  }
  .introduction{
    font-size: 16px;
    margin-left: 12rem;
    margin-top: 1rem;
  }
  .filewatch {
    display: flex;
    justify-content: space-around;
    width: 60%;
    margin-left: 12rem;
    margin-top: 1.5rem;
  }
  .filewatch1{
    margin-top: 1rem;
    margin-left: 12rem;
    font-size: 17px;
  }
  </style>